<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-27 21:17:05
 * @LastEditors: 王娆
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
  <div class="room">
    <h2>
      教室管理
    </h2>
    <div class="room-content">
      <div style="padding:24px">
        <div>
          <!-- <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="活动名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form> -->
          <div class="grade-table">
            <div class="block">
              <el-table
                :data="student.slice(this.$data.pagenum*this.$data.pagesize,this.$data.pagenum*this.$data.pagesize+this.$data.pagesize)"
                style="width: 100%" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column prop="student_name" label=姓名 width="180">
                </el-table-column>
                <el-table-column prop="student_id" label="学号" width="180">
                </el-table-column>
                <el-table-column prop="grade_name" label="班级">
                </el-table-column>
                <el-table-column prop="room_text" label="教室">
                </el-table-column>
                <el-table-column prop="student_pwd" label="密码">
                </el-table-column>
                <el-table-column prop="address" label="操作">
                  <span>删除</span>
                </el-table-column>
              </el-table>
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[5,10,20,50,100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
                :total="student.length">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
  data () {
    return {
      tableData: [{
        grade_id: 'ef5vzf-mk31ka-3ltqao-3ikaf7',
        grade_name: '1610A',
        room_id: 'ddlo2b-qqts69-2pq07w-hiua58',
        room_text: '34313',
        subject_id: 'fyu3ln-azjkie',
        subject_text: '渐进式开发(react)'
      }],
      pagenum: 0,
      pagesize: 10
    }
  },
  methods: {
    ...mapActions('Student', ['getAllStudent', 'getRoomStudent', 'noGetRoomStudent']),
    open () {

    },
    handleSizeChange (val) {
      this.$data.pagesize = val
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.$data.pagenum = val
      console.log(`当前页: ${val}`)
    }
  },
  created () {
    this.getAllStudent()
  },
  computed: {
    ...mapState('Student', ['student'])
  }
}
</script>

<style>
.room {
  width: 100vw;
  height: 100vh;
  background: #f0f2f5;
  padding: 0px 24px 24px;
  display: flex;
  flex-direction: column;
}
.room h2 {
  padding: 20px 0px;
  margin-top: 10px;
}

.room-content {
  background: #fff;
  flex: 1;
  border-radius: 10px;
}
</style>
